<template>
	<div class="FileUpload">
		<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
			:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	let that
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		name: 'FileUpload',
		components: {},
		computed: {
			...mapGetters(['userInfo', 'api', 'orgInfo']) //获取
		},
		props: {
			uploadNum: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				fileList:[],//上传的文件列表(展现在界面的文件列表)
			};
		},
		mounted() {
			that = this
		},


		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleChange(file, fileList) {
				console.log(file, fileList);
				that.fileList = fileList; //上传成功后显示在界面上
			},
		}
	};
</script>

<style scoped="scoped" lang="scss"></style>
